<template>
	<view>
		<view class="one">
			<view class="">
				<!-- <u-icon name='arrow-leftward' color='#ffffff' size='40' @click='backs'></u-icon> -->
			</view>
		</view>
		<view class="u-p-20" style="margin-top: -300rpx;">
			<view class="u-b-r-16" style="background-color:#ffffff;padding: 30rpx 20rpx;">
				<view class="u-weight">贡献值进度:</view>

				<view class="u-flex u-m-t-20">

					<view class="u-w-500 u-m-l-20">
						<u-line-progress active-color="#FF5502"
							:percent="Number(((info.all_conval/info.con_val)*100).toFixed(2))"></u-line-progress>
					</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view class="">所需贡献值:</view>
					<view class="" style="color: #FF5502;">{{info.con_val}}</view>
				</view>
				<view class="u-flex u-font-20 u-m-t-20">

					<view class="u-flex ">
						<view class="">已累计贡献值:</view>
						<view class="" style="color: #FF5502;">{{info.all_conval}}</view>
					</view>
					<view class="u-flex u-m-l-20">
						<view class="">剩余贡献值:</view>
						<view class="" style="color: #FF5502;">{{info.con_val-info.all_conval}}</view>
					</view>
				</view>

				<view class="u-m-t-20">
					<view class="" style="color: #1C1C1C;">订单：{{info.order_sn}}</view>
					<view class="u-m-t-20  " v-for="(item,index) in info.item" :key="index">
						<view class="u-flex u-row-between">
							<view class="u-flex">
								<view class="">
									<u-image :src='item.imgs[0]' width='183rpx' height='183rpx'></u-image>
								</view>
								<view class="u-p-l-10 u-h-184">
									<view class="u-weight">{{item.goods_name}}</view>
									<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
									<view class="u-font-20 u-m-t-10">
										{{item.spece_content||''}}
									</view>
									<view class=" u-p-t-10" style="color: #FC3533;">￥{{info.total_amount}}</view>
								</view>

							</view>
							<view class="u-font-20" style="color:#454545;">{{item.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="u-p-30">
			<view class="u-p-20 bg_FFFFFF ">
				<view class="u-flex u-row-between">
					<view class="u-weight u-font-30">获取贡献值</view>
					<view class="u-flex" @click="show=true">
						<view class="u-h-30">
							<u-image src='https://www.sqkjkj.vip/wxImg/contribution/img1.png' width='25rpx'
								height='25rpx'></u-image>
						</view>

						<view class="u-font-20 u-m-l-10" style="color: #FB473C;">查看规则</view>
					</view>
				</view>
				<view v-for="(item,indexs) in winInfo.methods" :key="indexs"
					class="u-p-b-30 u-m-t-30 u-flex u-row-between" style="border-bottom: 1rpx solid #E6E6E6;">
					<view class="u-flex ">
						<view class="u-flex u-row-between u-m-l-10 u-w-400">
							<view class="u-font-20">
								<view class="">{{item.title}}</view>
								<view class="u-m-t-10" style="color: #FC3533;">{{item.content}}</view>
							</view>
							<view class="u-p-r-6"><text
									style="color: #898989;">{{item.used_count}}</text>/{{item.all_count}}</view>
						</view>
					</view>
					<view @click="listClick(item)" class="u-w-170 u-h-68 u-b-r-12 u-text-center u-font-28 u-l-h-68"
						style="background-color: #FFE9DD; color: #FF5502;">{{item.btn}}</view>
				</view>
			</view>
		</view>
		<!-- 签到规则 -->
		<u-popup v-model="show" mode='center'>
			<view class="u-rela u-p-50 u-w-700 ">
				<view class="u-font-50 u-weight">贡献值规则</view>

				<view class="u-fix u-r-60 u-t-340">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/heart.png" mode="aspectFill" width="216rpx"
						height='274rpx'></u-image>
				</view>
				<view class="u-m-t-50">
					<u-parse :html="winInfo.con_val_rule"></u-parse>
				</view>
				<view @click="show=false"
					class="u-m-t-20 u-w-400 u-h-92 u-l-h-92 u-font-30 u-text-center u-auto cl_FFF u-b-r-20"
					style="background-color: #FC3533FF;">我知道了</view>
			</view>
		</u-popup>
		<u-mask :show="inviteShow">
			<view class="warp">
				<view class="u-w-700 u-p-20 bg_FFFFFF u-p-20 u-b-r-20">
					<view class="u-p-20 u-text-right" @click="inviteShow=false">
						<u-icon name="close-circle-fill" size="50"></u-icon>
					</view>
					<view class="">
						{{inviteInfo.share_content}}
					</view>
					<view class="u-m-t-40 u-flex u-weight u-row-between">
						<view class=" cl_FB473CFF ">
							{{inviteInfo.regcode}}
						</view>
						<view @click="copy" class="">
							去复制
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				winInfo: '',
				// 查看规则
				show: false,
				userinfo: '',
				status: '',
				// 优先订单
				num: 0,
				inviteShow: false,
				inviteInfo: ''
			}
		},
		onLoad(obj) {

		},
		onShow() {
			this.info = uni.getStorageSync('winList')
			console.log(this.info.item[0].goods_name,)
			this.get_con_val()
		},
		// onShareAppMessage() {
		// 	return {
		// 		title: this.info.item[0].goods_name,
		// 		imageUrl: this.info.item[0].imgs[0],
		// 		path: `/pages/home/home?regcode=${uni.getStorageSync('userinfo').regcode}`
		// 	}
		// },
		// onShareTimeline() {
		// 	return {
		// 		title: this.userinfo.data.name,
		// 		imageUrl: this.imgList[0].image,
		// 		path: `/pages/home/home?regcode=${uni.getStorageSync('userinfo').regcode}`
		// 	}
		// },
		onShareAppMessage() {
			return {
				title: this.info.item[0].goods_name,
				imageUrl:this.info.item[0].imgs[0],
				path: `/pages/home/paymassage?num=${this.info.item[0].spu}&regcode=${uni.getStorageSync('userinfo').regcode}&isOrder=1`
			}
		},
		onShareTimeline() {
			return {
				title: this.info.item[0].goods_name,
				imageUrl:this.info.item[0].imgs[0],
				path: `/pages/home/paymassage?num=${this.info.item[0].spu}&regcode=${uni.getStorageSync('userinfo').regcode}&isOrder=1`
			}
		},
		methods: {
			// 订单详情
			get_con_val() {
				this.$api.get_con_val({}, res => {
					if (res.data.code == 1) {
						this.winInfo = res.data.data
					}
				})
			},
			// 返回
			backs() {
				uni.navigateBack()
			},
			listClick(item) {
				console.log(item)
				if (item.type == 1) {
					this.$u.route('/subcontract/invitation/invitation')
				} else if (item.type == 2) {
					// #ifdef MP-WEIXIN
					this.$refs.uToast.show({
						title: '请点击右上角...进行分享朋友或朋友圈',
						type: 'success'
					})
					// #endif
					// #ifndef MP-WEIXIN
					this.inviteInfo = item
					this.inviteShow = true
					// #endif
				} else if (item.type == 3) {
					this.$u.route('/pages/home/goodShop')
				} else if (item.type == 4) {
					this.$api.set_prior_order({
						order_id: this.info.id
					}, res => {
						if (res.data.code == 1) {
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'success'
							})
						}
					})
				}
			},
			// 点击复制
			copy() {
				uni.setStorageSync('noOnHide', 'noOnHide')
				uni.setClipboardData({
					data: this.inviteInfo.regcode,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f5f5f5;
	}

	.one {
		width: 750rpx;
		height: 587rpx;
		background: url('https://www.sqkjkj.vip/wxImg/contribution/img.png') no-repeat;
		background-size: 100% 100%;
	}
</style>